<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        .box {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 10vh;
            background-color: aqua;
            display: none;
        }
        .btn {
            position: fixed;
            bottom: 20vh;
            right: 10vw;
            display: none;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button class="btn">按钮</button>
    <script>
        // 2.制作页面中的顶部通栏效果：
        //   页面准备一个顶部导航top:0和一个按钮right:50px;bottom:20%，均固定定位且初始化时隐藏；
        //   判断滚动距离大于400时，显示顶部导航，直接显示按钮  transition
        //   当滚动距离小于400时，再次隐藏元素
        //   当点击按钮时，smooth滚动条回到顶部
        const box = document.querySelector(".box")
        const btn = document.querySelector(".btn")
        window.onscroll = function () {
            i = document.documentElement.scrollTop
            console.log(document.documentElement.scrollTop)
            if (i < 400) {
                box.style.display = "none"
                btn.style.display = "none"
            }
            else if (i > 400) {
                box.style.display = "block"
                btn.style.display = "inline-block"
            }
        }
        btn.onclick = function () {
            window.scrollTo(0, 0)
        }
    </script>
</body>
</html>